<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H1 style="color: rosybrown;">简易留言板</H1>
    <div  class="wrapper">
        <ul id="words"></ul>
    </div>
    <textarea id="msg"></textarea>
    <button id="btn1">留言</button>
    <button id="btn2" "sum()">统计</button>
</body>
<script type="text/javascript">
var ul=document.getElementById('words');
var msg=document.getElementById('msg');
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
var liCount=0;
btn1.onclick=function(){
    if(!msg.value){
        alert('留言板里没有内容')
    }else{
        var li=document.createElement('li');
        li.innerHTML=msg.value+'&nbsp;&nbsp;<span>X</span>';
        if(liCount==0){
            ul.appendChild(li);
            liCount++;
        }else{
            ul.insertBefore(li,ul,childNodes[0]);
            liCount++;
        }
        msg.value='';
            }
            oSpans=document.getElementsByTagName('span');
            for(var i =0;i<oSpans.length;i++){
                    oSpans[i].onclick=function(){
                        ul.removeChild(this.parentNode);
                        liCount--;
                    }
            }
};
function sum(){
    alert('一共有'+liCount+'条信息');
}
</script>
</html>